import React, {ReactElement, useEffect, useState} from "react";
import {Avatar, Input, Table, TableProps} from "antd";
import UserApi from "@/api/UserApi.ts";
import {useUserInfoStore} from "@/store/BaseStore.ts";
import {UserInfo} from "@/api/Objects/UserTypes.ts";
import {RPage} from "@/api/Objects";

const toTableColumn = (
    title: string,
    dataIndex: string,
    render?: (
        value: any,
        record: UserInfo,
        index: number
    ) => ReactElement
) => {
    return {
        title: title,
        dataIndex: dataIndex,
        key: dataIndex,
        render: render
    }
}

const UserControlPage: React.FC = () => {
    const userInfo = useUserInfoStore(state => state.userInfo);
    const [userInfoPage, setUserInfoPage] = useState<RPage<UserInfo>>(null)

    useEffect(() => {
        UserApi.pageUser().then(data => {
            if (data.status) {
                setUserInfoPage(data.data)
            }
        })
    }, []);
    const columns: TableProps<UserInfo>['columns'] = [
        toTableColumn("id", "id"),
        toTableColumn("昵称", "nickName",
            (value, record, index) => {
                return (
                    <Input
                        defaultValue={value}
                        onBlur={(evt) => {
                            const newVal = evt.target.value
                            if (newVal == value) {
                                return
                            }
                            UserApi.updateUser({
                                ...record,
                                nickName: newVal
                            }).then(data => {
                                if (data.status) {
                                    window.messageApi.success("修改成功").then()
                                } else {
                                    window.messageApi.error("修改失败").then()
                                }
                            })
                        }}
                    />
                )
            }),
        toTableColumn("账号", "account",
            (value, record, index) => {
                return (
                    <Input
                        defaultValue={value}
                        onBlur={(evt) => {
                            const newVal = evt.target.value
                            if (newVal == value) {
                                return
                            }
                            UserApi.updateUser({
                                ...record,
                                account: newVal
                            }).then(data => {
                                if (data.status) {
                                    window.messageApi.success("修改成功").then()
                                } else {
                                    window.messageApi.error("修改失败").then()
                                }
                            })
                        }}
                    />
                )
            }),
        toTableColumn("头像", "avatar",
            (value, record, index) => {
                return (
                    <Avatar
                        src={value}
                        key={value}
                        shape="square"
                        size="large"
                    />
                )
            }),
        toTableColumn("用户类型", "userType"),
    ]

    if (userInfo == null || userInfoPage == null) {
        return (
            <Table/>
        )
    }
    return (
        <>
            <Table<UserInfo> dataSource={userInfoPage.records}
                             columns={columns}
                             rowKey="id"
            />
        </>
    )
}

export default UserControlPage